import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { useNavigate, useSearchParams } from 'react-router-dom'
// import { Skeleton } from 'tdesign-mobile-react';
import { Button, Space } from 'antd-mobile'
export default function Self() {
    let navigate = useNavigate()
    let [search] = useSearchParams()
    let id = search.get('id')
    // console.log(id);
    let [info, setInfo] = useState({})
    let top = () => {
        navigate(-1)
    }
    useEffect(() => {
        getinfo()
    }, [])
    let getinfo = async () => {
        let { data: { data } } = await axios.get('http://127.0.0.1:3000/mxd_getinfo', { params: { id } })
        // console.log(data);
        setInfo(data)

    }

    return (
        <div id='self'>
            <div className="top">
                <p>
                    <span>
                        <svg onClick={top} style={{ width: '30px', height: '35px', position: 'absolute', marginLeft: '5px' }} t="1724675809513" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2590" width="200" height="200"><path d="M670.6 861.6c-7.6 0-15.1-2.9-20.9-8.6L329.4 532.7c-11.6-11.5-11.6-30.3 0-41.8l320.2-320.2c5.8-5.8 13.3-8.6 20.9-8.6 7.5 0 15.1 2.9 20.9 8.6 11.5 11.5 11.5 30.2 0 41.8L392 511.8l299.4 299.4c11.5 11.6 11.5 30.3 0 41.8-5.7 5.7-13.3 8.6-20.8 8.6z" fill="#2c2c2c" p-id="2591"></path></svg>
                    </span>
                    <span style={{ marginLeft: '35px', marginTop: '10px', lineHeight: '33px', fontSize: '20px' }}>药物详情</span>
                    {/* <span onClick={update} style={{ height: '35px', position: 'absolute', marginLeft: '180px', top: '50px', fontSize: '15px', color: '#52BDFF' }}>编辑处方</span> */}
                </p>
                <hr />
            </div>
            <div className="big">
                <div className="infos">
                    <img src={info.img} alt="" />
                </div>
                <div className="text">
                    <p style={{ marginLeft: '20px', color: '#DA0110', fontWeight: 'bold' }}>￥{info.price}</p>
                    <p>
                        <Button className='btn2' size='mini' shape='rounded' style={{ backgroundColor: '#DA2222', color: 'white', marginLeft: '20px', marginRight: '10px' }} fill='solid'>
                            Rx
                        </Button>
                        <span>{info.name}</span>
                    </p>
                    <p style={{fontSize:'15px',marginTop:'10px',marginLeft:'20px'}}>北京诺华制药有限公司</p>
                    <p style={{marginTop:'10px',marginLeft:'10px'}}>【药品名称】</p>
                    <p style={{marginTop:'10px',marginLeft:'10px'}}>通用名：{info.name}</p>
                    <p style={{marginTop:'10px' ,marginLeft:'10px'}}>【适应症状】</p>
                    <p style={{marginTop:'10px',marginLeft:'20px'}}>{info.sym}</p>
                    <p style={{marginTop:'10px',marginLeft:'10px'}}>【规格】</p>
                    <p style={{marginTop:'10px',marginLeft:'20px'}}>{info.grade}</p>
                    <p style={{marginTop:'10px',marginLeft:'10px'}}>【形状】</p>
                    <p style={{marginTop:'10px',marginLeft:'20px'}}>{info.shape}</p>
                    <p style={{marginTop:'10px',marginLeft:'10px'}}>【用法用量】</p>
                    <p style={{marginTop:'10px',marginLeft:'20px'}}>{info.usage}</p>
                </div>
            </div>
        </div>
    )
}
